header {
  box-sizing: border-box;
  padding-top: 16px;
  width: 100%;
  height: max-content;

  &>.upload-list {
    display: flex;
    flex-direction: column;
    gap: 16px;

    &>.item {
      &.flex {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
      }
    }
  }

  .alipay-hide {
    margin-top: 20px;

    span.title {
      display: inline-block;
      padding-bottom: 10px;
    }
  }
}

main {
  box-sizing: border-box;
  padding-top: 28.88px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28.88px;
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.18s ease;

  &.show {
    opacity: 1;
    height: max-content;
  }

  &>.qr-main {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18.88px;
    width: 100%;
    aspect-ratio: 1/1;
    background: none;
    overflow: hidden;

    &>img {
      width: 100%;
      aspect-ratio: 1/1;

      &.alipay-qr {
        position: absolute;
        right: 18.88px;
        top: auto;
        bottom: 18.88px;
        width: 50%;
        transform: rotate(180deg);
      }
    }

    &.theme_a {
      padding: 0;
      aspect-ratio: 529/573;
      background: url('../../assets/images/theme_a.webp') no-repeat;
      background-size: contain;

      &>img {
        width: 24%;
        height: auto;
        aspect-ratio: 1/1;
        object-fit: contain;

        &.alipay-qr {
          position: absolute;
          right: 50%;
          top: 50%;
          width: 12%;
          height: auto;
          transform: translate(100%, 0) rotate(180deg);
        }
      }
    }

    &.theme_b {
      padding: 0;
      aspect-ratio: 1152/1909;
      background: url('../../assets/images/theme_b.webp') no-repeat;
      background-size: contain;

      &>img {
        width: 62%;
        height: auto;
        aspect-ratio: 1/1;
        object-fit: contain;

        &.alipay-qr {
          position: absolute;
          right: 50%;
          top: 50%;
          width: 31%;
          height: auto;
          transform: translate(100%, 0) rotate(180deg);
        }
      }
    }

    &.theme_c {
      padding: 0;
      aspect-ratio: 621/881;
      background: url('../../assets/images/theme_c.webp') no-repeat;
      background-size: contain;

      &>img {
        width: 55%;
        height: auto;
        aspect-ratio: 1/1;
        object-fit: contain;

        &.alipay-qr {
          position: absolute;
          right: 50%;
          top: 50%;
          width: 27.5%;
          height: auto;
          transform: translate(100%, 0) rotate(180deg);
        }
      }
    }

    &.theme_d {
      padding: 0;
      aspect-ratio: 1152/1909;
      background: url('../../assets/images/theme_d.webp') no-repeat;
      background-size: contain;

      &>img {
        width: 62%;
        height: auto;
        aspect-ratio: 1/1;
        object-fit: contain;

        &.alipay-qr {
          position: absolute;
          right: 50%;
          top: 50%;
          width: 31%;
          height: auto;
          transform: translate(100%, 0) rotate(180deg);
        }
      }
    }

  }

}
